<script setup lang="ts">
import { gsap } from 'gsap';
import bonusSvg from '~/components-business/auth/sign/imgs/bonus.svg';

onMounted(() => {
  const tl = gsap.timeline({ repeat: -1, repeatDelay: 0 });
  tl.to('.gift-icon-scoped', { rotation: -8, duration: 0.4, ease: 'power2.inOut' })
    .to('.gift-icon-scoped', { rotation: 8, duration: 0.4, ease: 'power2.inOut' });
});
</script>

<template>
  <div class="sign-div">
    <AButton
      class="ant-cover__Button-3d-yellow" block size="small" type="primary"
      @click="globalPopups.sign.open?.({ view: 'signIn' })"
    >
      {{ $t('qwZi820O3qWpsae62Juc') }}
    </AButton>
    <div class="relative ml-1 mr-2.5">
      <AButton
        class="ant-cover__Button-3d-primary w-full" block size="small" type="primary"
        @click="globalPopups.sign.open?.({ view: 'signUp' })"
      >
        {{ $t('wV2h5ZuzGb9WHcTjDAaGx') }}
      </AButton>
      <img :src="bonusSvg" class="gift-icon-scoped absolute top-3px z-1 w-7.5 -right-4.5">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sign-div {
  display: flex;
  height: 32px;
  transform: translateY(-1.5px);

  & > * {
    height: 100% !important;
    min-width: 80px !important;
  }
}

// .gift-icon-scoped {
//   animation: shake 0.5s infinite;
// }

// @keyframes shake {
//   0%,
//   100% {
//     transform: translateX(0%);
//     transform-origin: 50% 50%;
//   }
//   15% {
//     transform: translateX(-1.5px) rotate(-6deg);
//   }
//   30% {
//     transform: translateX(1.5px) rotate(6deg);
//   }
//   45% {
//     transform: translateX(-1.5px) rotate(-3.6deg);
//   }
//   60% {
//     transform: translateX(1.5px) rotate(2.4deg);
//   }
//   75% {
//     transform: translateX(-1.5px) rotate(-1.2deg);
//   }
// }
</style>
